<template>
  <el-card
    v-if="goods"
    class="box-card"
  >
    <div
      slot="header"
      class="clearfix"
    >
      <span class="goods-name">{{ goods.name }}</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="square">
          <div class="square-content">
            <el-image
              class="image"
              :src="goods.thumb"
              fit="cover"
              v-if="!goods.video"
            ></el-image>
            <video
              v-if="goods.video"
              :poster="goods.thumb"
              controls
              preload="metadata"
              class="video"
              :src="goods.video"
            ></video>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info">
          <template v-if="!goods.showPrice">
            <div
              v-if="(!goods.prices || goods.prices.length === 0) && goods.formatPrice"
              class="info-row"
            >
              <span class="price">¥{{ goods.formatPrice }}</span>
            </div>
            <div
              v-if="goods.prices && goods.prices.length > 0"
              class="info-row"
            >
              <span class="price">¥{{ goods.prices[0].formatPrice }}</span>
              <span class="orgin-price">¥{{ goods.formatPrice }}</span>
            </div>
          </template>
          <div
            v-else
            class="info-row"
          >
            <span class="price">¥{{ goods.showPrice }}</span>
          </div>
          <div class="info-row">
            <el-tag
              size="default"
              type="danger"
              effect="dark"
            >
              {{ goods.goodsType.desc }}
            </el-tag>
            <span class="sales-volume">已售出 {{ goods.salesVolume }}</span>
          </div>
          <div
            class="info-row"
            v-if="goods.goodsType.name === 'Gallery'"
          >
            <el-row>
              <span class="attribute-name">默认数量</span>
              <span class="info-text">{{ goods.photoSpecs[0].number }} 张</span>
              <span class="attribute-name">最大数量</span>
              <span class="info-text">{{ goods.maxCount }} 张</span>
              <span class="attribute-name">超出数量单价</span>
              <span class="info-text">¥{{ goods.overPrice.toFixed(2) }}</span>
              <template v-if="goods.returnDay">
                <span class="attribute-name">一般回单天数 </span>
                <span class="info-text">{{goods.returnDay}}天</span>
              </template>
            </el-row>
          </div>
          <el-divider
            content-position="left"
            v-if="goods.photoSpecs && goods.photoSpecs.length > 0"
          >照片规格</el-divider>
          <el-row>
            <el-tag
              effect="plain"
              v-for="spec in goods.photoSpecs"
              :key="spec.id"
              class="spec-info"
              size="default"
            >{{ spec.name ? "[" + spec.name + "] " : "" }}宽：{{
                spec.width
              }}
              厘米，高：{{ spec.height }} 厘米，DPI：{{ spec.dpi }} 数量: {{spec.number}}</el-tag>
          </el-row>
          <el-divider
            content-position="left"
            v-if="goods.attributes && goods.attributes.length > 0"
          >属性选择</el-divider>
          <div
            :class="index > 0 ? 'info-row' : ''"
            v-for="(attribute, index) in goods.attributes"
            :key="attribute.id"
          >
            <el-row>
              <span class="attribute-name">选择{{ attribute.name }}</span>
              <el-tag
                effect="plain"
                v-for="value in attribute.values"
                :key="value.id"
                @click="selectAttributeValue(value.id, attribute.id)"
                :type="isSelectedValue(value.id) ? 'danger' : ''"
                class="attribute-value"
                size="default"
              >{{ value.name }}</el-tag>
            </el-row>
          </div>
          <el-divider></el-divider>
          <el-button
            v-if="goods.goodsStatus.name === $CONST.GOODS_STATUS.ON_SALE.name"
            type="danger"
            size="default"
            @click="buyIt"
          >立即下单</el-button>
          <el-button
            v-if="goods.goodsStatus.name === $CONST.GOODS_STATUS.OFF_SHELF.name"
            type="info"
            disabled
            size="default"
          >已下架</el-button>
          <el-button
            type="warning"
            :plain="!goods.isFavourite"
            :icon="goods.isFavourite ? 'el-icon-star-on' : 'el-icon-star-off'"
            size="default"
            @click="toggleFavourite"
          >{{ goods.isFavourite ? '已收藏' : '收藏' }}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-divider content-position="center">详情介绍</el-divider>
    <div class="ql-container ql-snow">
      <div
        v-html="goods.description"
        class="ql-editor"
      ></div>
    </div>
  </el-card>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import goodsApi from '@/api/goods'
import favouriteGoodsApi from '@/api/favouriteGoods'
import waves from '@/directive/waves' // 水波纹指令
import { mapGetters } from 'vuex'

export default {
  props: {
    id: String
  },
  directives: {
    waves
  },
  computed: {
    ...mapGetters(['mainContainerHeight'])
  },
  watch: {
    mainContainerHeight: function (newHeight, oldHeight) {
      this.resize()
    }
  },
  data () {
    return {
      clientHeight: 500,
      goods: null,
      selectedAttributes: []
    }
  },
  methods: {
    /**
     * 加载数据
     */
    getGoods () {
      goodsApi.getById(this.id).then((response) => {
        this.goods = response.data
        this.goods.basePrice =
          !this.goods.prices || this.goods.prices.length === 0
            ? this.goods.price
            : this.goods.prices[0].price
      })
    },
    /**
     * 选择属性值
     *
     * @param valueId 值
     * @param attributeId 属性
     */
    selectAttributeValue (valueId, attributeId) {
      this.selectedAttributes = this.selectedAttributes.filter(
        (a) => a.attributeId !== attributeId
      )
      const value = this.goods.attributes
        .find((a) => a.id === attributeId)
        .values.find((v) => v.id === valueId)
      this.selectedAttributes.push({
        attributeId,
        valueId,
        price: value.price
      })
      var attributePrice = 0
      this.selectedAttributes.forEach((a) => {
        attributePrice += a.price
      })
      this.goods.showPrice = (this.goods.basePrice + attributePrice).toFixed(2)
    },
    /**
     * 是否是选择值
     *
     * @param valueId 值
     */
    isSelectedValue (valueId) {
      return (
        this.selectedAttributes.findIndex((a) => a.valueId === valueId) > -1
      )
    },
    /**
     * 立即下单
     */
    buyIt () {
      if (
        this.goods.attributes &&
        this.goods.attributes.length > 0 &&
        this.selectedAttributes.length !== this.goods.attributes.length
      ) {
        this.$message({
          message: '请选择商品属性',
          type: 'warning'
        })
        return
      }
      this.$router.pushQueryTo(this.$router.routesConfig.orderConfirm, {
        id: this.id,
        attributes: this.selectedAttributes.map((att) => att.valueId)
      })
    },
    /**
     * 切换收藏状态
     */
    toggleFavourite () {
      if (!this.goods.isFavourite) {
        favouriteGoodsApi.addFavourite(this.goods.id, null).then((response) => {
          this.goods.isFavourite = true
        })
      } else {
        favouriteGoodsApi.deleteFavourite(this.goods.id).then((response) => {
          this.goods.isFavourite = false
        })
      }
    },
    resize () {
      var that = this
      that.clientHeight = that.mainContainerHeight - 80
    }
  },
  mounted () {
    this.getGoods()
    var that = this
    this.$nextTick(function () {
      that.resize()
    })
  }
}
</script>
<style lang="scss" scoped>
.ql-container.ql-snow {
  border: none;
}
.box-card {
  width: 1080px;
  margin: 0 auto;
}
.info {
  flex: 1;
  padding-left: 20px;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.rich-text {
  overflow-y: auto;
  overflow-x: hidden;
}

.goods-name {
  color: #666;
  font: 700 16px Arial, "microsoft yahei";
}

.info-row {
  padding-top: 15px;
}

.price {
  font-weight: bold;
  font-size: 22px;
  color: #e4393c;
}

.orgin-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 15px;
}

.sales-volume {
  font-size: 14px;
  color: #999;
  line-height: 24px;
  margin-left: 10px;
}

.attribute-name {
  font-size: 10px;
  color: #999;
  font-weight: 400px;
  line-height: 40px;
  margin-right: 15px;
}

.attribute-value {
  margin: 0 10px 5px 0;
  cursor: pointer;
}

.info-text {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-right: 30px;
}

.spec-info {
  margin: 0 10px 5px 0;
}

.el-tag--plain {
  border-color: #ccc;
  color: #999;
}

.square {
  padding-bottom: 100%;
  height: 0;
  width: 100%;
  position: relative;
}

.square-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
